<script lang="ts" setup>
import { reactive, ref, watch } from "vue"
import { type GetTableData } from "@/api/table/types/table"
import { type FormInstance, ElMessage } from "element-plus"
import { Search, Refresh, RefreshRight, Download } from "@element-plus/icons-vue"
import { usePagination } from "@/hooks/usePagination"
import { doFinishApi, getBillListApi, getBillLogListApi } from "@/api/bill"
import { getBillInventorExportApi } from "@/api/billv2"
import { companyListApi } from "@/api/conventional"
import { getAdminRoleListApi } from "@/api/system"
import { frontExport, generateDiscount, generatePrice, sumValuesForName } from "@/utils/common"
import Decimal from "decimal.js"

defineOptions({
  // 命名当前组件
  name: "ElementPlus"
})

const loading = ref<boolean>(false)
const countBool = ref<boolean>(false)

const { paginationData, handleCurrentChange, handleSizeChange } = usePagination()

//#region 增
const dialogVisible = ref<boolean>(false)
const customDateFormat = ref<string>("YYYY-MM-DD")
const customDateTimeFormat = ref<string>("YYYY-MM-DD HH:mm:ss")
// const formRef = ref<FormInstance | null>(null)
const formData = reactive({
  bill_id: 0,
  enter_company_id: 0,
  enter_admin_id: 0,
  enter_finally: 0,
  enter_discount: 0,
  enter_price: 0,
  out_company_id: 0,
  out_admin_id: 0,
  out_finally: 0,
  out_discount: 0,
  out_price: 0,
  bill_back_user: "",
  billNo: "",
  billAmount: 0,
  expirationDate: "",
  recognizerDate: "",
  enter_state: "",
  out_state: "",
  acceptorName: "",
  bankName: ""
})
// const formRules: FormRules = reactive({
//   username: [{ required: true, trigger: "blur", message: "请输入用户名" }],
//   password: [{ required: true, trigger: "blur", message: "请输入密码" }]
// })
const handleCreate = () => {
  doFinishApi(formData)
    .then(() => {
      ElMessage.success("修改成功")
      getTableData()
    })
    .finally(() => {
      dialogVisible.value = false
    })
}
const resetForm = () => {
  currentUpdateId.value = undefined
  formData.bill_id = 0
  formData.enter_company_id = 0
  formData.enter_admin_id = 0
  formData.enter_finally = 0
  formData.enter_discount = 0
  formData.enter_price = 0
  formData.out_company_id = 0
  formData.out_admin_id = 0
  formData.out_finally = 0
  formData.out_discount = 0
  formData.out_price = 0
  formData.bill_back_user = ""
  formData.billNo = ""
  formData.billAmount = 0
  formData.expirationDate = ""
  formData.recognizerDate = ""
  formData.enter_state = ""
  formData.out_state = ""
  formData.acceptorName = ""
  formData.bankName = ""
}
//#endregion

//#region 删
// const handleDelete = (row: GetTableData) => {
//   ElMessageBox.confirm(`正在删除用户：${row.username}，确认删除？`, "提示", {
//     confirmButtonText: "确定",
//     cancelButtonText: "取消",
//     type: "warning"
//   }).then(() => {
//     deleteTableDataApi(row.id).then(() => {
//       ElMessage.success("删除成功")
//       getTableData()
//     })
//   })
// }
//#endregion

//#region 改
const currentUpdateId = ref<undefined | string>(undefined)
const handleUpdate = (row: any) => {
  currentUpdateId.value = row.bill_id
  Object.assign(formData, row)
  getAdminList()
  getBillLogList()
  dialogVisible.value = true
}
//#endregion

//#region 查
const tableData = ref<GetTableData[]>([])
const searchFormRef = ref<FormInstance | null>(null)
const searchData = reactive({
  billNo: "",
  buttonType: "all",
  acceptorName: "",
  bill_back_user: "",
  billAmountMin: "",
  billAmountMax: "",
  expirationDateStart: "",
  expirationDateEnd: "",
  enter_timeStart: "",
  enter_timeEnd: "",
  out_timeStart: "",
  out_timeEnd: "",
  history_type: undefined,
  churu_type: undefined,
  uid: undefined,
  date1: "",
  date2: ""
})

const tableRowStyle = ({ row }: any) => {
  let style = {}
  if (row.enter_complete == 2 && row.out_complete == 2) {
    // console.log(row.bill_id)
    // style = {
    //   background: "#fdf6ec"
    // }
  } else {
    style = {
      background: "#fdf6ec"
    }
  }
  return style
}
const getTableData = () => {
  loading.value = true
  getBillListApi({
    pageNum: paginationData.currentPage,
    pageSize: paginationData.pageSize,
    billNo: searchData.billNo || undefined,
    date1: searchData.date1 || undefined,
    date2: searchData.date2 || undefined,
    acceptorName: searchData.acceptorName || undefined,
    bill_back_user: searchData.bill_back_user || undefined,
    billAmountMin: searchData.billAmountMin || undefined,
    billAmountMax: searchData.billAmountMax || undefined,
    enter_timeStart: searchData.enter_timeStart || undefined,
    enter_timeEnd: searchData.enter_timeEnd || undefined,
    out_timeStart: searchData.out_timeStart || undefined,
    out_timeEnd: searchData.out_timeEnd || undefined,
    history_type: searchData.history_type || undefined,
    uid: searchData.uid || undefined,
    churu_type: searchData.churu_type || undefined,
    pageType: "history",
    buttonType: searchData.buttonType || "all"
  })
    .then((res) => {
      paginationData.total = res.data.total
      tableData.value = res.data.list
    })
    .catch(() => {
      tableData.value = []
    })
    .finally(() => {
      loading.value = false
    })
}
const handleSearch = () => {
  paginationData.currentPage === 1 ? getTableData() : (paginationData.currentPage = 1)
}
const resetSearch = () => {
  searchData.billNo = ""
  searchData.acceptorName = ""
  searchData.bill_back_user = ""
  searchData.billAmountMin = ""
  searchData.billAmountMax = ""
  searchData.expirationDateStart = ""
  searchData.expirationDateEnd = ""
  searchData.enter_timeStart = ""
  searchData.enter_timeEnd = ""
  searchData.date1 = ""
  searchData.date2 = ""
  searchData.out_timeStart = ""
  searchData.out_timeEnd = ""
  searchData.history_type = undefined
  searchData.uid = undefined
  searchData.churu_type = undefined
  searchFormRef.value?.resetFields()
  handleSearch()
}
//#endregion
const listData = ref<any>([])
const listLog = ref<any>([])
const getBillLogList = async () => {
  const res = await getBillLogListApi({
    bill_id: formData.bill_id
  })
  listLog.value = res.data
}

const getAdminList = async () => {
  await getAdminRoleListApi({
    role_ids: 2
  })
    .then((res) => {
      listData.value = res.data
    })
    .catch(() => {})
    .finally(() => {})
}
getAdminList()
// const companyLists = async () => {
//   const data = await companyListApi({
//     company_name: state.value
//   })
//   if (data.data.length == 0) ElMessage.error("请先添加企业信息")
//   return data.data
// }
const enter_querySearchAsync = (queryString: string, cb: any) => {
  formData.enter_state = queryString
  companyListApi({
    company_name: queryString
  }).then((res) => {
    const lists = res.data
    if (lists.length == 0) {
      ElMessage.error("请先添加企业信息")
      cb([])
    } else {
      cb(lists)
    }
  })
}
const enter_handleSelect = (item: Record<string, any>) => {
  formData.enter_admin_id = item.uid
  formData.enter_company_id = item.id
}
const out_querySearchAsync = (queryString: string, cb: any) => {
  formData.out_state = queryString
  companyListApi({
    company_name: queryString
  }).then((res) => {
    const lists = res.data
    if (lists.length == 0) {
      ElMessage.error("请先添加企业信息")
      cb([])
    } else {
      cb(lists)
    }
  })
}
const out_handleSelect = (item: Record<string, any>) => {
  formData.out_admin_id = item.uid
  formData.out_company_id = item.id
}

const change = () => {
  const { finallyAmount, discountAmount } = generatePrice(
    formData.enter_price,
    formData.enter_finally,
    formData.enter_discount,
    formData.billAmount + "",
    false
  )
  formData.enter_discount = discountAmount
  formData.enter_finally = finallyAmount
}
const out_change = () => {
  const { finallyAmount, discountAmount } = generatePrice(
    formData.out_price,
    formData.out_finally,
    formData.out_discount,
    formData.billAmount + "",
    false
  )
  formData.out_discount = discountAmount
  formData.out_finally = finallyAmount
}
const discountChange = () => {
  const { price, finallyAmount } = generateDiscount(
    formData.enter_price,
    formData.enter_finally,
    formData.enter_discount,
    formData.billAmount + "",
    false
  )
  formData.enter_price = price
  formData.enter_finally = finallyAmount
}
const out_discountChange = () => {
  const { price, finallyAmount } = generateDiscount(
    formData.out_price,
    formData.out_finally,
    formData.out_discount,
    formData.billAmount + "",
    false
  )
  formData.out_price = price
  formData.out_finally = finallyAmount
}

const buttonList = reactive<any>([
  { name: "all", label: "全部订单", badge: "" },
  // { name: "pending", label: "待入库信息", badge: "" },
  { name: "enter_incomplete", label: "入库未完成", badge: "" },
  { name: "enter_complete", label: "入库完成", badge: "" },
  { name: "failed", label: "失败的订单", badge: "" },
  { name: "out_incomplete", label: "出库未完成", badge: "" },
  { name: "out_complete", label: "出库完成", badge: "" }
])
const buttonStates = reactive<any>({
  all: true,
  enter_incomplete: false,
  enter_complete: false,
  out_incomplete: false,
  out_complete: false,
  failed: false
})

const toggleSelection = (buttonName: string) => {
  for (const key in buttonStates) {
    const button = key === buttonName
    if (button) {
      searchData.buttonType = buttonName
      getTableData()
    }
    buttonStates[key] = button
  }
}
const States = ref(false)
const closes = () => {
  States.value = !States.value
}

const modality = (row: any) => {
  if (row.columnIndex == 2) {
    return {
      color: "#2e90f7",
      border: "1px solid #cccccc"
    }
  }
  if (row.columnIndex == 4) {
    return {
      color: "red",
      border: "1px solid #cccccc"
    }
  }
  return {
    border: "1px solid #cccccc"
  }
}

const selectedCountData = reactive({
  count: 0,
  amount: 0,
  enter_complete: 0,
  enter_discount: 0,
  out_complete: 0,
  out_discount: 0
})
const resetSelectedCountData = () => {
  selectedCountData.count = 0
  selectedCountData.amount = 0
  selectedCountData.enter_complete = 0
  selectedCountData.enter_discount = 0
  selectedCountData.out_complete = 0
  selectedCountData.out_discount = 0
}
const handleSelectionChange = (val: any) => {
  if (val.length === 0) {
    resetSelectedCountData()
    countBool.value = false
  } else {
    selectedCountData.count = val.length
    selectedCountData.amount = sumValuesForName(val, "billAmount")
    selectedCountData.enter_complete = sumValuesForName(val, "enter_finally")
    selectedCountData.enter_complete = parseFloat(selectedCountData.enter_complete.toFixed(2))
    selectedCountData.enter_discount = sumValuesForName(val, "enter_discount")
    selectedCountData.enter_discount = parseFloat(selectedCountData.enter_discount.toFixed(2))
    selectedCountData.out_complete = sumValuesForName(val, "out_finally")
    selectedCountData.out_complete = parseFloat(selectedCountData.out_complete.toFixed(2))
    selectedCountData.out_discount = sumValuesForName(val, "out_discount")
    selectedCountData.out_discount = parseFloat(selectedCountData.out_discount.toFixed(2))
    countBool.value = true
  }

  selectedRows.value = val
}
const selectedRows = ref<any[]>([])
const getBillExport2 = () => {
  console.log(selectedRows.value)
  if (selectedRows.value.length === 0) {
    ElMessage.warning("请选择要导出的数据")
    return
  }
  const header = [
    "入库时间",
    "票号",
    "承兑人",
    "票面金额（万）",
    "",
    "到期日",
    "入库每十万价格",
    "入库贴息费",
    "入库实付金额",
    "",
    "背书人",
    "出库客户",
    "出库每十万价格",
    "出库贴息费",
    "出库实收金额",
    "差额",
    "出库时间",
    "入库业务员",
    "出库业务员"
  ]
  const data = selectedRows.value.map((item: any) => [
    item.enter_time,
    item.billNo,
    item.acceptorName,
    item.billAmount,
    "",
    item.expirationDate,
    new Decimal(item.enter_price || 0).div(new Decimal(1000)) + "%",
    item.enter_discount,
    item.enter_finally,
    "",
    item.bill_back_user,
    item.out_state,
    new Decimal(item.out_price || 0).div(new Decimal(1000)) + "%",
    item.out_discount,
    item.out_finally,
    item.profit,
    item.out_time,
    item.enter_nickname,
    item.out_nickname
  ])
  frontExport(data, header)
}

const getBillExport = () => {
  loading.value = true
  getBillInventorExportApi({
    // getBillExportApi({
    pageType: "history",
    buttonType: "all",
    billNo: searchData.billNo || undefined,
    date1: searchData.date1 || undefined,
    date2: searchData.date2 || undefined,
    acceptorName: searchData.acceptorName || undefined,
    bill_back_user: searchData.bill_back_user || undefined,
    billAmountMin: searchData.billAmountMin || undefined,
    billAmountMax: searchData.billAmountMax || undefined,
    out_timeStart: searchData.out_timeStart || undefined,
    out_timeEnd: searchData.out_timeEnd || undefined,
    history_type: searchData.history_type || undefined,
    uid: searchData.uid || undefined,
    churu_type: searchData.churu_type || undefined
  })
    .then((res: any) => {
      links(res.data.filePath)
    })
    .catch(() => {})
    .finally(() => {
      loading.value = false
    })
}
const links = (filePath: string) => {
  const link = document.createElement("a") // 创建一个 a 标签用来模拟点击事件
  link.style.display = "none"
  link.href = filePath
  link.setAttribute("download", "票据管理")
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

const churuTypeChange = (event: any) => {
  console.log("churuTypeChange")
  console.log(event)
}

const handleInput = (event: any) => {
  event = event.replace(/，/g, ",")
  searchData.acceptorName = event.replace(/\s+/g, ",")
}

/** 监听分页参数的变化 */
watch([() => paginationData.currentPage, () => paginationData.pageSize], getTableData, { immediate: true })
</script>

<template>
  <div class="app-container">
    <el-card v-loading="loading" shadow="hover" class="search-wrapper">
      <div style="margin-bottom: 20px">
        <!-- 我收到的	全部订单	待入库信息	入库未完成	入库完成	失败的订单 -->
        <el-space :size="30">
          <template v-for="item in buttonList" :key="item.name">
            <el-badge :value="item.badge" class="item">
              <el-button :type="buttonStates[item.name] ? 'primary' : 'default'" @click="toggleSelection(item.name)">
                {{ item.label }}
              </el-button>
            </el-badge>
          </template>
        </el-space>
      </div>
    </el-card>
    <el-card v-loading="loading" shadow="never" class="search-wrapper">
      <el-form ref="searchFormRef" :inline="true" :model="searchData">
        <el-form-item label="票号">
          <el-input v-model="searchData.billNo" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="承兑人">
          <el-input v-model="searchData.acceptorName" @input="handleInput" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="客户信息">
          <el-input v-model="searchData.bill_back_user" placeholder="请输入" clearable />
        </el-form-item>

        <el-form-item label="票面金额" v-if="States">
          <el-col :span="11">
            <el-input v-model="searchData.billAmountMin" placeholder="请输入" clearable />
          </el-col>
          <el-col :span="2" class="text-center">
            <span class="text-gray-500">-</span>
          </el-col>
          <el-col :span="11">
            <el-input v-model="searchData.billAmountMax" placeholder="请输入" clearable />
          </el-col>
        </el-form-item>
        <el-form-item label="到期日" v-if="States">
          <el-col :span="11">
            <el-date-picker
              :format="customDateFormat"
              :value-format="customDateFormat"
              v-model="searchData.expirationDateStart"
              type="date"
              placeholder="请选择"
              style="width: 100%"
              clearable
            />
          </el-col>
          <el-col :span="2" class="text-center">
            <span class="text-gray-500">-</span>
          </el-col>
          <el-col :span="11">
            <el-date-picker
              :format="customDateFormat"
              :value-format="customDateFormat"
              v-model="searchData.expirationDateEnd"
              type="date"
              placeholder="请选择"
              style="width: 100%"
              clearable
            />
          </el-col>
        </el-form-item>
        <el-form-item label="入库时间" v-if="States">
          <el-col :span="11">
            <el-date-picker
              :format="customDateTimeFormat"
              :value-format="customDateTimeFormat"
              v-model="searchData.enter_timeStart"
              type="datetime"
              placeholder="请选择"
              style="width: 100%"
              clearable
            />
          </el-col>
          <el-col :span="2" class="text-center">
            <span class="text-gray-500">-</span>
          </el-col>
          <el-col :span="11">
            <el-date-picker
              :format="customDateTimeFormat"
              :value-format="customDateTimeFormat"
              v-model="searchData.enter_timeEnd"
              type="datetime"
              placeholder="请选择"
              style="width: 100%"
              clearable
            />
          </el-col>
        </el-form-item>
        <el-form-item label="出库时间" v-if="States">
          <el-col :span="11">
            <el-date-picker
              :format="customDateTimeFormat"
              :value-format="customDateTimeFormat"
              v-model="searchData.out_timeStart"
              type="datetime"
              placeholder="请选择"
              style="width: 100%"
              clearable
            />
          </el-col>
          <el-col :span="2" class="text-center">
            <span class="text-gray-500">-</span>
          </el-col>
          <el-col :span="11">
            <el-date-picker
              :format="customDateTimeFormat"
              :value-format="customDateTimeFormat"
              v-model="searchData.out_timeEnd"
              type="datetime"
              placeholder="请选择"
              style="width: 100%"
              clearable
            />
          </el-col>
        </el-form-item>
        <el-form-item label="业务员" v-if="States">
          <el-select v-model="searchData.uid" placeholder="请选择" clearable>
            <el-option v-for="item in listData" :key="item.id" :label="item.nickname" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="类别" v-if="States">
          <el-select @change="churuTypeChange" v-model="searchData.churu_type" placeholder="请选择" clearable>
            <el-option label="入库" value="1" />
            <el-option label="出库" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" v-if="States">
          <el-select v-model="searchData.history_type" placeholder="请选择" clearable>
            <el-option label="未完成" value="1" />
            <el-option label="已完成" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="识别日期" v-if="States">
          <el-col :span="11">
            <el-date-picker
              :format="customDateFormat"
              :value-format="customDateFormat"
              v-model="searchData.date1"
              type="date"
              placeholder="请选择"
              style="width: 100%"
              clearable
            />
          </el-col>
          <el-col :span="2" class="text-center">
            <span class="text-gray-500">-</span>
          </el-col>
          <el-col :span="11">
            <el-date-picker
              :format="customDateFormat"
              :value-format="customDateFormat"
              v-model="searchData.date2"
              type="date"
              placeholder="请选择"
              style="width: 100%"
              clearable
            />
          </el-col>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
          <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
          <el-button @click="closes">{{ States ? "收起" : "展开" }}</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card v-loading="loading" class="search-wrapper">
      <div style="margin-bottom: 20px">
        <el-row>
          <el-col :span="20">
            <div style="height: 20px; display: flex; align-items: center">
              <el-icon v-if="countBool" style="margin-right: 10px"><Warning /></el-icon>
              <span v-if="countBool">
                共<span style="color: red">{{ selectedCountData.count }}</span
                >张票据
              </span>
              <span v-if="countBool">
                ，票面总金额<span style="color: red">{{ selectedCountData.amount }}</span
                >万元
              </span>
              <template v-if="countBool">
                <span>
                  ，实付金额<span style="color: red">{{ selectedCountData.enter_complete }}</span
                  >元
                </span>
                <span>
                  ，贴息费/返点费<span style="color: red">{{ selectedCountData.enter_discount }}</span
                  >元
                </span>
                <span>
                  ，实收金额<span style="color: red">{{ selectedCountData.out_complete }}</span
                  >元
                </span>
                <span>
                  ，贴息费/返点费<span style="color: red">{{ selectedCountData.out_discount }}</span
                  >元
                </span>
              </template>
            </div>
          </el-col>
          <el-col :span="4">
            <div style="display: flex; justify-content: flex-end">
              <el-tooltip content="导出">
                <el-button type="primary" :icon="Download" circle @click="getBillExport2" />
              </el-tooltip>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-card v-loading="loading" shadow="never">
      <div class="toolbar-wrapper">
        <div />
        <div>
          <el-tooltip content="下载">
            <el-button type="primary" :icon="Download" circle @click="getBillExport" />
          </el-tooltip>
          <el-tooltip content="刷新当前页">
            <el-button type="primary" :icon="RefreshRight" circle @click="getTableData" />
          </el-tooltip>
        </div>
      </div>
      <div class="table-wrapper">
        <el-table
          :data="tableData"
          :row-style="tableRowStyle"
          :header-cell-style="{
            background: '#ecf4f9 !important',
            color: '#32617d !important',
            border: '1px solid #cccccc'
          }"
          class="ones"
          :cell-style="modality"
          @selection-change="handleSelectionChange"
          style="width: 100%"
        >
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column prop="billNo" label="票号" align="center">
            <template #default="scope">
              <div style="display: flex; align-items: center" v-if="scope.row.is_dismantle == 2">
                <el-icon>
                  <Scissor />
                </el-icon>
                <el-icon v-if="scope.row.is_repeat == 2"><DocumentCopy /></el-icon>
                <span style="margin-left: 10px">{{ scope.row.billNo }}</span>
              </div>
              <div style="display: flex; align-items: center" v-else>
                <el-icon v-if="scope.row.is_repeat == 2"><DocumentCopy /></el-icon>
                <span style="margin-left: 10px">{{ scope.row.billNo }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="acceptorName" label="承兑人" align="center" />
          <el-table-column prop="billAmount" label="票面金额(万元)" align="center" />
          <el-table-column prop="expirationDate" label="到期日期" align="center" />
          <el-table-column prop="bill_back_user" label="背书人" align="center">
            <template #default="scope">
              <div>
                <div style="display: flex; align-items: center; justify-content: center">
                  <el-tag v-if="scope.row.enter_invoicings == 1" style="margin-right: 10px" size="small">开</el-tag>
                  <el-tag v-if="scope.row.enter_checks == 1" style="margin-right: 10px" size="small">先</el-tag>
                </div>
                <div>
                  {{ scope.row.bill_back_user }}
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="入库" align="center">
            <el-table-column prop="enter_time" label="时间" align="center" />
            <el-table-column prop="enter_price" label="每十万价格" align="center" />
            <el-table-column prop="enter_discount" label="贴息费/返点费" align="center" />
            <el-table-column prop="enter_finally" label="实付金额" align="center" />
            <el-table-column prop="enter_nickname" label="业务员" align="center" />
          </el-table-column>
          <el-table-column label="出库" align="center">
            <el-table-column prop="out_time" label="时间" align="center" />
            <el-table-column prop="out_price" label="每十万价格" align="center" />
            <el-table-column prop="out_discount" label="贴息费/返点费" align="center" />
            <el-table-column prop="out_finally" label="实收金额" align="center" />
            <el-table-column prop="out_state" label="出库客户" align="center">
              <template #default="scope">
                <div>
                  <div style="display: flex; align-items: center; justify-content: center">
                    <el-tag v-if="scope.row.out_invoicings == 1" style="margin-right: 10px" size="small">开</el-tag>
                    <el-tag v-if="scope.row.out_checks == 1" style="margin-right: 10px" size="small">先</el-tag>
                  </div>
                  <div>
                    {{ scope.row.out_state }}
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="out_nickname" label="业务员" align="center" />
          </el-table-column>
          <el-table-column label="差额" prop="profit" width="100" align="center" />
          <el-table-column prop="process_status_text" label="状态" align="center">
            <template #default="scope">
              <el-tag v-if="scope.row.enter_complete == 2 && scope.row.out_complete == 2" type="success">已完成</el-tag>
              <el-tag v-else type="danger">未完成</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="bill_type_text" label="客户类别" align="center" />
          <!--          <el-table-column prop="create_time" label="创建时间" align="center" />-->
          <el-table-column fixed="right" label="操作" width="80" align="center">
            <template #default="scope">
              <el-button type="primary" text bg size="small" @click="handleUpdate(scope.row)">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pager-wrapper">
        <el-pagination
          background
          :layout="paginationData.layout"
          :page-sizes="paginationData.pageSizes"
          :total="paginationData.total"
          :page-size="paginationData.pageSize"
          :currentPage="paginationData.currentPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <!-- 新增/修改 -->
    <el-dialog v-model="dialogVisible" title="详情" @close="resetForm" width="80%">
      <div style="display: flex; align-items: center; justify-content: space-between">
        <div style="display: flex; margin-right: 30px">
          <el-text class="mx-1" type="primary">进票客户：</el-text>
          <el-autocomplete
            v-model="formData.enter_state"
            value-key="company_name"
            :fetch-suggestions="enter_querySearchAsync"
            placeholder="请选择客户"
            @select="enter_handleSelect"
          />
        </div>
        <div style="display: flex">
          <el-text class="mx-1" type="primary">业务员：</el-text>
          <el-select v-model="formData.enter_admin_id" class="m-2" placeholder="请选择">
            <el-option v-for="item in listData" :key="item.id" :label="item.nickname" :value="item.id" />
          </el-select>
        </div>
        <div style="display: flex; margin-right: 30px">
          <el-text class="mx-1" type="primary">出票客户：</el-text>
          <el-autocomplete
            v-model="formData.out_state"
            value-key="company_name"
            :fetch-suggestions="out_querySearchAsync"
            placeholder="请选择客户"
            @select="out_handleSelect"
          />
        </div>
        <div style="display: flex">
          <el-text class="mx-1" type="primary">业务员：</el-text>
          <el-select v-model="formData.out_admin_id" class="m-2" placeholder="请选择">
            <el-option v-for="item in listData" :key="item.id" :label="item.nickname" :value="item.id" />
          </el-select>
        </div>
      </div>
      <el-descriptions title="票据信息" border size="small" :column="3">
        <el-descriptions-item label="日期">{{ formData.recognizerDate }}</el-descriptions-item>
        <el-descriptions-item label="票号">{{ formData.billNo }}</el-descriptions-item>
        <el-descriptions-item label="承兑人">{{ formData.acceptorName }}</el-descriptions-item>
        <el-descriptions-item label="到期日">{{ formData.expirationDate }}</el-descriptions-item>
        <el-descriptions-item label="背书人">{{ formData.bill_back_user }}</el-descriptions-item>
        <el-descriptions-item label="票面金额(万元)">{{ formData.billAmount }}</el-descriptions-item>
        <!--        <el-descriptions-item label="入库-每十万价格">{{ formData.enter_price }}</el-descriptions-item>-->
        <!--        <el-descriptions-item label="入库-贴息价格">{{ formData.enter_discount }}</el-descriptions-item>-->
        <!--        <el-descriptions-item label="入库-最终价格">{{ formData.enter_finally }}</el-descriptions-item>-->
        <el-descriptions-item label="入库每十万价格">
          <el-input
            v-model="formData.enter_price"
            type="number"
            min="1"
            placeholder="请输入"
            clearable
            @change="change"
          />
        </el-descriptions-item>
        <el-descriptions-item label="入库贴息价格">
          <el-input
            v-model="formData.enter_discount"
            type="number"
            min="1"
            placeholder="请输入"
            clearable
            @change="discountChange"
          />
        </el-descriptions-item>
        <el-descriptions-item label="入库最终价格">{{ formData.enter_finally }}</el-descriptions-item>
        <el-descriptions-item label="出库每十万价格">
          <el-input
            v-model="formData.out_price"
            type="number"
            min="1"
            placeholder="请输入"
            clearable
            @change="out_change"
          />
        </el-descriptions-item>
        <el-descriptions-item label="出库贴息价格">
          <el-input
            v-model="formData.out_discount"
            type="number"
            min="1"
            placeholder="请输入"
            clearable
            @change="out_discountChange"
          />
        </el-descriptions-item>
        <el-descriptions-item label="出库最终价格">{{ formData.out_finally }}</el-descriptions-item>
      </el-descriptions>
      <div class="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleCreate">确认</el-button>
      </div>
      <div class="logBox">
        <el-timeline>
          <el-timeline-item v-for="(item, index) in listLog" :key="index" :timestamp="item.create_time" placement="top">
            <el-card>
              <p>{{ item.user_text + item.content }}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.ones {
  background: #f4f8fb;
  border: 1px solid #cccccc;
}
.mx-1 {
  width: 30%;
}

.search-wrapper {
  margin-bottom: 20px;

  :deep(.el-card__body) {
    padding-bottom: 2px;
  }
}

.toolbar-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.table-wrapper {
  margin-bottom: 20px;
}

.pager-wrapper {
  display: flex;
  justify-content: flex-end;
}

.logBox {
  margin-top: 10px;
}

.footer {
  margin-top: 10px;
  display: flex;
  justify-content: end;
}
</style>
